<template>
  <div class="legend" :style="{ left, bottom }">
    <img class="legendIcon" :class="{ greyIcon: !state.isShowLegendList }" src="./icon.png" @click="handleClickShowLegend" />
    <div class="legendListBox" v-show="state.isShowLegendList">
      <div class="title">
        <h3><img src="./icon.png" />图例</h3>
        <span @click.stop="state.isMore = !state.isMore">更多 >></span>
      </div>
      <ul class="legendList">
        <li
          v-for="(item, index) in state.legendData"
          :class="{ isShow: !item.status }"
          :key="index"
          @click.stop="handleClickLegendItem(item)"
        >
          <img :src="item.icon" alt="图标" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <div class="layerTreeBox" v-show="state.isMore">
        <div class="closeBtn" @click.stop="state.isMore = false">✖</div>
        <LayerTree />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch } from 'vue';
  import { setLayerVisible } from 'gmap-ol';
  import LayerTree from './LayerTree';

  defineOptions({ name: 'LegendPage' });
  const emit = defineEmits(['change-legend-data']);

  const props = defineProps({
    name: { type: String },
    left: {
      type: String,
      default: '-50px',
    },
    bottom: {
      type: String,
      default: '0',
    },
    data: {
      type: [Number, Array, String] as PropType<string | string[]>,
      default: '',
    },
    globalMap: {
      type: Object,
      default: null,
    },
  });

  const state = reactive({
    isShowLegendList: false,
    isMore: false,
    legendData: [...props.data],
  });

  const handleClickShowLegend = () => {
    state.isShowLegendList = !state.isShowLegendList
  }

  // 点击图例icon
  const handleClickLegendItem = (item) => {
    let legendData = state.legendData;
    for (let i = 0; i < legendData.length; i++) {
      if (legendData[i].name === item.name) {
        const status = !legendData[i].status;
        legendData[i].status = status;
        state.legendData = legendData;
      }
    }
    emit('change-legend-data', legendData);
    changeLegendStatus(state.legendData);
  };

  const changeLegendStatus = (legendData) => {
    for (let i = 0; i < legendData.length; i++) {
      const type = legendData[i].type;
      const status = legendData[i].status;
      change3DPopupOverlayStatus(type, status);
      if (props.globalMap) {
        setLayerVisible(props.globalMap, type, status);
      }
    }
  };

  // 改变三维站点显示隐藏
  const change3DPopupOverlayStatus = (type, status) => {
    const nodeList = document.querySelectorAll(`.${type}-PopupOverlay`);
    nodeList.forEach((element) => {
      if (status) {
        element.style.display = 'block';
      } else {
        element.style.display = 'none';
      }
    });
  };

  watch(
    () => props.globalMap,
    () => {
      changeLegendStatus(state.legendData);
    }
  );
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .legend {
    width: 40px;
    height: 40px;
    background: rgba(251, 252, 255, 1);
    box-shadow: 0px 4px 6px 0px #03225917;
    border-radius: 6px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    &:hover, &:active {
      // background: #e8fff4;
      border: 1px solid #b9e9d3;
    }
    img.legendIcon {
      width: 24px;
      height: 25px;
      cursor: pointer;
    }
    .greyIcon {
      filter: grayscale(100%);
    }
    .legendListBox {
      position: absolute;
      right: 50px;
      bottom: 0;
      width: 200px;
      background: rgba(251, 252, 255, 1);
      box-shadow: 0px 4px 6px 0px #03225917;
      border-radius: 6px;
      border: 1px solid #fff;
      padding: 2px 10px 10px 10px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        border-bottom: 1px dashed #bef3ce;
        margin-bottom: 10px;
        h3 {
          display: flex;
          align-items: center;
          color: #1b9b68;
          font-size: 14px;
          img {
            width: 14px;
            margin-right: 6px;
            opacity: 0.9;
          }
        }
        span {
          color: #81d9b2;
          cursor: pointer;
          font-size: 12px;
          &:hover {
            color: #1b9b68;
          }
        }
      }
      ul.legendList {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 10px;
        grid-column-gap: 6px;
        li {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            margin-right: 6px;
          }
        }
        .isShow {
          filter: grayscale(100%) !important;
          opacity: 0.7 !important;
        }
      }
    }
    .layerTreeBox {
      position: absolute;
      bottom: calc(100% + 14px);
      right: 0px;
      width: 100%;
      height: 400px;
      background: rgba(251, 252, 255, 1);
      box-shadow: 0px 4px 6px 0px #03225917;
      border-radius: 6px;
      border: 1px solid #bef3ce;
      .closeBtn {
        position: absolute;
        top: 6px;
        right: 14px;
        color: #81d9b2;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1b9b68;
        }
      }
    }
  }
</style>
